<template>
 <div class="app-container">
     <Search :paramsList="paramsList" :searchParams="searchParams" @search="handleSearch"/>
     <el-row :gutter="10" class="mb8">
       <el-col :span="1.5">
         <el-button type="primary" plain icon="el-icon-plus" size="mini" @click="handleAdd()">新增
         </el-button>
       </el-col>
       <el-col :span="1.5">
         <el-button type="danger" plain icon="el-icon-delete" size="mini" :disabled="multipleSelection.length === 0" @click="handleBatchDelete">批量删除
         </el-button>
       </el-col>
       <el-col :span="1.5">
         <el-button type="info" plain icon="el-icon-refresh" size="mini" @click="handleReset">重置
         </el-button>
       </el-col>
       <el-col :span="1.5">
         <el-button type="warning" plain icon="el-icon-download" size="mini" @click="handleExport">导出
         </el-button>
       </el-col>
       <el-col :span="1.5">
        <el-upload
          :action="importAction"
          :headers="{ Authorization: 'Bearer ' + token }"
          :show-file-list="false"
          :on-success="onImportSuccess"
          :on-error="onImportError"
          :multiple="false"
          :limit="1"
          accept=".xls,.xlsx">
          <el-button type="success" plain icon="el-icon-upload2" size="mini">导入</el-button>
        </el-upload>
      </el-col>
     </el-row>
     <Table ref="table" :loading="loading" :headerData="headerData" :tableData="tableData" @selection-change="handleSelectionChange">
       <template slot="operation" slot-scope="scope">
         <el-button type="text" @click="handleEdit(scope.row)" :disabled="!hasEditPermission">编辑</el-button>
         <el-button type="text" @click="handleDelete(scope.row)" :disabled="!hasDeletePermission">删除</el-button>
       </template>
     </Table>

     <!-- 分页组件 -->
     <el-pagination
       @size-change="handleSizeChange"
       @current-change="handleCurrentChange"
       :current-page="queryParams.pageNum"
       :page-sizes="[10, 20, 50, 100]"
       :page-size="queryParams.pageSize"
       layout="total, sizes, prev, pager, next, jumper"
       :total="total"
       class="pagination-container">
     </el-pagination>

     <!-- 新增/编辑用户弹窗 -->
     <el-dialog :title="dialogTitle" :visible.sync="dialogVisible" width="600px" @close="handleDialogClose">
       <el-form ref="userForm" :model="userForm" :rules="userRules" label-width="100px">
         <el-row :gutter="20">
           <el-col :span="12">
             <el-form-item label="用户昵称" prop="nickname">
               <el-input v-model="userForm.nickname" placeholder="请输入用户昵称" />
             </el-form-item>
           </el-col>
           <el-col :span="12">
             <el-form-item label="用户姓名" prop="userName">
               <el-input v-model="userForm.userName" placeholder="请输入用户姓名" />
             </el-form-item>
           </el-col>
         </el-row>
         <el-row :gutter="20">
           <el-col :span="12">
             <el-form-item label="手机号码" prop="phoneNumber">
               <el-input v-model="userForm.phoneNumber" placeholder="请输入手机号码" />
             </el-form-item>
           </el-col>
           <el-col :span="12">
             <el-form-item label="年龄" prop="age">
               <el-input-number v-model="userForm.age" :min="1" :max="150" placeholder="请输入年龄" style="width: 100%" />
             </el-form-item>
           </el-col>
         </el-row>
         <el-row :gutter="20">
           <el-col :span="12">
             <el-form-item label="身份证号码" prop="idCardNumber">
               <el-input v-model="userForm.idCardNumber" placeholder="请输入身份证号码" />
             </el-form-item>
           </el-col>
           <el-col :span="12">
             <el-form-item label="民族" prop="nation">
               <el-select v-model="userForm.nation" placeholder="请选择民族" style="width: 100%">
                 <el-option label="汉族" value="汉族" />
                 <el-option label="满族" value="满族" />
                 <el-option label="蒙古族" value="蒙古族" />
                 <el-option label="回族" value="回族" />
                 <el-option label="藏族" value="藏族" />
                 <el-option label="维吾尔族" value="维吾尔族" />
                 <el-option label="苗族" value="苗族" />
                 <el-option label="彝族" value="彝族" />
                 <el-option label="壮族" value="壮族" />
                 <el-option label="其他" value="其他" />
               </el-select>
             </el-form-item>
           </el-col>
         </el-row>
         <el-row :gutter="20">
           <el-col :span="12">
             <el-form-item label="籍贯" prop="nativePlace">
               <el-input v-model="userForm.nativePlace" placeholder="请输入籍贯" />
             </el-form-item>
           </el-col>
           <el-col :span="12">
             <el-form-item label="状态" prop="status">
               <el-radio-group v-model="userForm.status">
                 <el-radio :label="'0'">正常</el-radio>
                 <el-radio :label="'1'">停用</el-radio>
               </el-radio-group>
             </el-form-item>
           </el-col>
         </el-row>
         <el-form-item label="地址" prop="address">
           <el-input v-model="userForm.address" type="textarea" :rows="3" placeholder="请输入详细地址" />
         </el-form-item>
         <el-form-item label="备注" prop="remark">
           <el-input v-model="userForm.remark" type="textarea" :rows="3" placeholder="请输入备注信息" />
         </el-form-item>
       </el-form>
       <div slot="footer" class="dialog-footer">
         <el-button @click="dialogVisible = false">取 消</el-button>
         <el-button type="primary" @click="submitForm" :loading="submitLoading">确 定</el-button>
       </div>
     </el-dialog>
 </div>
</template>

<script >
import Table from "@/components/Tables/index.vue";
import Search from "@/components/Select/index.vue"
import {getUserInfoList, addUserInfo, updateUserInfo, deleteUserInfo} from "@/api/business/userInfo/index.js";
import request from "@/utils/request";

export default {
  components: {Table,Search},
  data(){
    return{
      paramsList: [
        {label: "用户昵称", type: "input", key: "nickname"},
        {label: "用户姓名", type: "input", key: "userName"},
        {label: "手机号码", type: "input", key: "phoneNumber"},
        {label: "地址", type: "input", key: "address"},
      ],
      queryParams: {
        pageNum: 1,
        pageSize: 10,
        nickname: undefined,
        userName: undefined,
        phoneNumber: undefined,
        address: undefined,
        beginTime: undefined,
        endTime: undefined
      },
      searchParams: {},
      loading: false,
      tableData: [],
      total: 0,
      importAction: process.env.VUE_APP_BASE_API + '/admin/user/import',
      token: '',
      headerData:[
        {type: 'selection', width: '55'},
        {prop: 'userId', label: '用户ID', width: '80'},
        {prop: 'nickname', label: '用户昵称'},
        {prop: 'userName', label: '用户姓名'},
        {prop: 'phoneNumber', label: '手机号码'},
        {prop: 'address', label: '地址'},
        {prop: 'age', label: '年龄'},
        {prop: 'idCardNumber', label: '身份证号码'},
        {prop: 'nativePlace', label: '籍贯'},
        {prop: 'nation', label: '民族'},
        {prop: 'status', label: '状态', formatter: this.formatStatus},
        {prop: 'createTime', label: '创建时间'},
        {type: 'operation', label: '操作', width: '150'}
             ],
       // 多选相关
       multipleSelection: [],
       // 权限控制
       hasEditPermission: true,
       hasDeletePermission: true,
       // 弹窗相关
       dialogVisible: false,
       dialogTitle: '',
               userForm: {
          userId: undefined,
          nickname: '',
          userName: '',
          phoneNumber: '',
          age: undefined,
          idCardNumber: '',
          nation: '',
          nativePlace: '',
          status: '0',
          address: '',
          remark: ''
        },
      userRules: {
        nickname: [{ required: true, message: '请输入用户昵称', trigger: 'blur' }],
        userName: [{ required: true, message: '请输入用户姓名', trigger: 'blur' }],
        phoneNumber: [
          { required: true, message: '请输入手机号码', trigger: 'blur' },
          { pattern: /^1[3-9]\d{9}$/, message: '请输入正确的手机号码', trigger: 'blur' }
        ],
        age: [{ required: true, message: '请输入年龄', trigger: 'change' }],
        idCardNumber: [
          { required: true, message: '请输入身份证号码', trigger: 'blur' },
          { pattern: /(^\d{15}$)|(^\d{18}$)|(^\d{17}(\d|X|x)$)/, message: '请输入正确的身份证号码', trigger: 'blur' }
        ],
        nation: [{ required: true, message: '请选择民族', trigger: 'change' }],
        nativePlace: [{ required: true, message: '请输入籍贯', trigger: 'blur' }],
        status: [{ required: true, message: '请选择状态', trigger: 'change' }],
        address: [{ required: true, message: '请输入地址', trigger: 'blur' }],
        remark: [{ required: false, message: '请输入备注', trigger: 'blur' }]
      },
      submitLoading: false
    }
  },
  created() {
    this.initPermissions()
    this.getUser()
    // 读取Token
    const cookie = document.cookie.split('; ').find(v => v.startsWith('Admin-Token='))
    this.token = cookie ? decodeURIComponent(cookie.split('=')[1]) : ''
  },
  methods:{
    /*
    * 初始化权限
    * */
    initPermissions(){
      // 这里可以根据用户角色和权限来设置操作权限
      // 可以从vuex store或用户信息中获取权限
      // 暂时设置为true，实际使用时需要根据真实权限判断
      this.hasEditPermission = true
      this.hasDeletePermission = true
    },

    /*
    * 上传前拦截，转为自定义提交
    * */
    onImportSuccess(){
      this.$message.success('导入成功')
      this.getUser()
    },
    onImportError(err){
      console.error('导入失败:', err)
      this.$message.error('导入失败，请检查文件格式或稍后重试')
    },

    /*
    * 导入前检查文件类型
    * */
    beforeImport(file) {
      const isExcel = file.name.endsWith('.xls') || file.name.endsWith('.xlsx');
      if (!isExcel) {
        this.$message.error('只能导入 .xls 或 .xlsx 文件！');
        return false;
      }
      return true;
    },

    /*
    * 搜索方法
    * */
    handleSearch(params){
      console.log('搜索参数:', params)

      // 重置分页到第一页
      this.queryParams.pageNum = 1

      // 处理搜索参数
      this.handleSearchParams(params)

      // 根据搜索参数重新获取数据
      this.getUser()
    },
    /*
    * 处理搜索参数
    * */
    handleSearchParams(params) {
      // 清空之前的搜索条件
      this.queryParams.nickname = undefined
      this.queryParams.userName = undefined
      this.queryParams.phoneNumber = undefined
      this.queryParams.address = undefined
      this.queryParams.ageMin = undefined
      this.queryParams.ageMax = undefined
      this.queryParams.beginTime = undefined
      this.queryParams.endTime = undefined

      // 设置新的搜索条件
      if (params.nickname) {
        this.queryParams.nickname = params.nickname.trim()
      }
      if (params.userName) {
        this.queryParams.userName = params.userName.trim()
      }
      if (params.phoneNumber) {
        this.queryParams.phoneNumber = params.phoneNumber.trim()
      }
      if (params.address) {
        this.queryParams.address = params.address.trim()
      }
      if (params.createTimeRange) {
        // 处理日期范围，可能是数组格式或字符串格式
        if (Array.isArray(params.createTimeRange) && params.createTimeRange.length === 2) {
          this.queryParams.beginTime = params.createTimeRange[0]
          this.queryParams.endTime = params.createTimeRange[1]
        } else if (typeof params.createTimeRange === 'string' && params.createTimeRange.includes('-')) {
          // 处理字符串格式 "2023-01-01-2023-12-31"
          const dates = params.createTimeRange.split('-')
          if (dates.length >= 4) {
            this.queryParams.beginTime = `${dates[0]}-${dates[1]}-${dates[2]}`
            this.queryParams.endTime = `${dates[3]}-${dates[4]}-${dates[5]}`
          }
        }
      }
    },

    /*
    * 重置搜索条件
    * */
    handleReset() {
      // 重置搜索参数
      this.searchParams = {}

      // 重置查询参数
      this.queryParams = {
        pageNum: 1,
        pageSize: 10,
        nickname: undefined,
        userName: undefined,
        phoneNumber: undefined,
        address: undefined,
        ageMin: undefined,
        ageMax: undefined,
        beginTime: undefined,
        endTime: undefined
      }

      // 重新获取数据
      this.getUser()
    },

    /*
    * 分页大小改变
    * */
    handleSizeChange(val) {
      this.queryParams.pageSize = val
      this.getUser()
    },

    /*
    * 当前页改变
    * */
    handleCurrentChange(val) {
      this.queryParams.pageNum = val
      this.getUser()
    },

    /*
    * 获取用户列表
    * */
    getUser(){
      this.tableData = []
      this.loading = true

      // 构建请求参数，过滤掉undefined和null值
      const requestParams = {}
      Object.keys(this.queryParams).forEach(key => {
        if (this.queryParams[key] !== undefined && this.queryParams[key] !== null && this.queryParams[key] !== '') {
          requestParams[key] = this.queryParams[key]
        }
      })

      getUserInfoList(requestParams).then(res => {
        console.log('API响应:', res)
        if (res.code === 200){
          this.loading = false
          // 验证数据完整性，确保每个用户都有ID
          const validData = (res.rows || []).map(user => {
            // 如果后端返回的是id字段，转换为userId字段以保持一致性
            if (user.id && !user.userId) {
              user.userId = user.id
            }
            // 调试信息
            if (!user.userId && !user.id) {
              console.warn('用户数据缺少ID字段:', user)
            }
            return user
          })
          this.tableData = validData
          this.total = res.total || 0

          // 调试信息
          console.log('处理后的用户数据:', this.tableData)
        } else {
          this.loading = false
          this.$message.error(res.msg || '获取用户列表失败')
        }
      }).catch(error => {
        console.error('获取用户列表错误:', error)
        this.loading = false
        this.$message.error('获取用户列表失败')
      })
    },

    /*
    * 新增用户
    * */
    handleAdd(){
      console.log('新增用户')
      this.dialogTitle = '新增用户'
      this.userForm = {
        userId: undefined,
        nickname: '',
        userName: '',
        phoneNumber: '',
        age: undefined,
        idCardNumber: '',
        nation: '',
        nativePlace: '',
        status: '0',
        address: '',
        remark: ''
      }
      this.dialogVisible = true
    },

    /*
    * 编辑方法
    * */
    handleEdit(row){
      console.log('编辑用户:', row)

      // 权限检查
      if (!this.hasEditPermission) {
        this.$message.warning('您没有编辑权限')
        return
      }

      // 检查数据完整性
      if (!row.userId && !row.id) {
        this.$message.error('用户数据不完整，无法编辑')
        return
      }

      this.dialogTitle = '编辑用户'

      // 深拷贝数据，避免直接修改原数据
      this.userForm = {
        userId: row.userId || row.id, // 兼容不同的ID字段名
        nickname: row.nickname || '',
        userName: row.userName || '',
        phoneNumber: row.phoneNumber || '',
        age: row.age || undefined,
        idCardNumber: row.idCardNumber || '',
        nation: row.nation || '',
        nativePlace: row.nativePlace || '',
        status: row.status === 0 || row.status === '0' ? '0' : '1',
        address: row.address || '',
        remark: row.remark || ''
      }

      this.dialogVisible = true
    },

    /*
    * 删除单个用户
    * */
    handleDelete(row){
      console.log('删除用户:', row)

      // 权限检查
      if (!this.hasDeletePermission) {
        this.$message.warning('您没有删除权限')
        return
      }

      // 检查数据完整性
      if (!row.userId && !row.id) {
        this.$message.error('用户数据不完整，无法删除')
        return
      }

      // 检查是否为系统用户（防止误删）
      if (row.userName === 'admin' || row.userName === 'system') {
        this.$message.warning('系统用户不能删除')
        return
      }

      const userId = row.userId || row.id
      this.$confirm(`确认删除用户"${row.userName || row.nickname}"吗？此操作不可恢复！`, '删除确认', {
        confirmButtonText: '确定删除',
        cancelButtonText: '取消',
        type: 'warning',
        dangerouslyUseHTMLString: true
      }).then(() => {
        this.deleteUser(userId)
      }).catch(() => {
        this.$message.info('已取消删除')
      })
    },

    /*
    * 批量删除
    * */
    handleBatchDelete(){
      if (this.multipleSelection.length === 0) {
        this.$message.warning('请选择要删除的用户')
        return
      }

      // 权限检查
      if (!this.hasDeletePermission) {
        this.$message.warning('您没有删除权限')
        return
      }

      // 检查是否包含系统用户
      const systemUsers = this.multipleSelection.filter(user =>
        user.userName === 'admin' || user.userName === 'system'
      )

      if (systemUsers.length > 0) {
        this.$message.warning('选中的用户中包含系统用户，不能删除')
        return
      }

      const userNames = this.multipleSelection.map(user => user.userName || user.nickname).join('、')

      this.$confirm(`确认删除以下 ${this.multipleSelection.length} 个用户吗？<br/>${userNames}<br/>此操作不可恢复！`, '批量删除确认', {
        confirmButtonText: '确定删除',
        cancelButtonText: '取消',
        type: 'warning',
        dangerouslyUseHTMLString: true
      }).then(() => {
        this.batchDeleteUsers()
      }).catch(() => {
        this.$message.info('已取消删除')
      })
    },

    /*
    * 执行删除操作
    * */
    deleteUser(userId){
      deleteUserInfo(userId).then(res => {
        if (res.code === 200) {
          this.$message.success('删除成功')
          // 如果当前页只有一条数据且不是第一页，则跳转到上一页
          if (this.tableData.length === 1 && this.queryParams.pageNum > 1) {
            this.queryParams.pageNum--
          }
          this.getUser() // 刷新列表
        } else {
          this.$message.error(res.msg || '删除失败')
        }
      }).catch(error => {
        console.error('删除用户错误:', error)
        this.$message.error('删除失败，请稍后重试')
      })
    },

    /*
    * 执行批量删除操作
    * */
    batchDeleteUsers(){
      const userIds = this.multipleSelection.map(user => user.userId || user.id).filter(id => id)

      if (userIds.length === 0) {
        this.$message.error('选中的用户数据不完整，无法删除')
        return
      }

      // 这里需要后端提供批量删除接口，暂时使用循环删除
      const deletePromises = userIds.map(userId => deleteUserInfo(userId))

      Promise.all(deletePromises).then(results => {
        const successCount = results.filter(res => res.code === 200).length
        const failCount = results.length - successCount

        if (failCount === 0) {
          this.$message.success(`成功删除 ${successCount} 个用户`)
        } else {
          this.$message.warning(`删除完成：成功 ${successCount} 个，失败 ${failCount} 个`)
        }

        // 清空选择
        this.multipleSelection = []
        // 刷新列表
        this.getUser()
      }).catch(error => {
        console.error('批量删除错误:', error)
        this.$message.error('批量删除失败，请稍后重试')
      })
    },

    /*
    * 选择变化处理
    * */
    handleSelectionChange(selection){
      // 过滤掉没有有效ID的用户
      this.multipleSelection = selection.filter(user => user.userId || user.id)

      // 如果有无效的用户数据，给出提示
      if (selection.length !== this.multipleSelection.length) {
        this.$message.warning('部分用户数据不完整，已自动过滤')
      }
    },

    /*
    * 状态格式化
    * */
    formatStatus(row, column, cellValue){
      const status = cellValue === 0 || cellValue === '0' ? '正常' : '停用'
      const className = cellValue === 0 || cellValue === '0' ? 'status-normal' : 'status-disabled'
      return `<span class="${className}">${status}</span>`
    },

    /*
    * 弹窗关闭
    * */
    handleDialogClose(){
      this.$refs.userForm.resetFields()
    },

    /*
    * 提交表单
    * */
    submitForm(){
      this.$refs.userForm.validate(valid => {
        if (valid) {
          this.submitLoading = true

          // 数据预处理
          const requestParams = {
            ...this.userForm,
            status: this.userForm.status === '0' ? 0 : 1, // 转换状态为数字
            age: this.userForm.age || undefined,
            // 去除空字符串
            nickname: this.userForm.nickname.trim(),
            userName: this.userForm.userName.trim(),
            phoneNumber: this.userForm.phoneNumber.trim(),
            idCardNumber: this.userForm.idCardNumber.trim(),
            nation: this.userForm.nation.trim(),
            nativePlace: this.userForm.nativePlace.trim(),
            address: this.userForm.address.trim(),
            remark: this.userForm.remark ? this.userForm.remark.trim() : ''
          }

          // 如果是新增，则调用新增接口
          if (!this.userForm.userId) {
            console.log('执行新增操作')
            this.addUser(requestParams)
          } else {
            // 如果是编辑，则调用编辑接口
            console.log('执行编辑操作，用户ID:', this.userForm.userId)
            // 确保编辑时有用户ID
            if (!requestParams.userId) {
              this.$message.error('用户ID不能为空')
              this.submitLoading = false
              return
            }
            this.updateUser(requestParams)
          }
        } else {
          console.log('表单验证失败')
          return false
        }
      })
    },

    /*
    * 新增用户
    * */
    addUser(params){
      addUserInfo(params).then(res => {
        if (res.code === 200) {
          this.$message.success('新增用户成功')
          this.dialogVisible = false
          this.getUser() // 刷新列表
        } else {
          this.$message.error(res.msg || '新增用户失败')
        }
        this.submitLoading = false
      }).catch(error => {
        console.error('新增用户错误:', error)
        this.$message.error('新增用户失败，请稍后重试')
        this.submitLoading = false
      })
    },

    /*
    * 更新用户
    * */
    updateUser(params){
      console.log('开始更新用户，参数:', params)

      // 再次验证用户ID
      if (!params.userId) {
        this.$message.error('用户ID不能为空')
        this.submitLoading = false
        return
      }

      updateUserInfo(params).then(res => {
        console.log('更新用户响应:', res)
        if (res.code === 200) {
          this.$message.success('编辑用户成功')
          this.dialogVisible = false
          this.getUser() // 刷新列表
        } else {
          this.$message.error(res.msg || '编辑用户失败')
        }
        this.submitLoading = false
      }).catch(error => {
        console.error('编辑用户错误:', error)
        this.$message.error('编辑用户失败，请稍后重试')
        this.submitLoading = false
      })
    },

    /*
    * 导出用户
    * */
    handleExport(){
      const exportParams = {}
      Object.keys(this.queryParams).forEach(key => {
        if (this.queryParams[key] !== undefined && this.queryParams[key] !== null && this.queryParams[key] !== '') {
          exportParams[key] = this.queryParams[key]
        }
      })
      const filename = `用户数据_${Date.now()}.xlsx`
      this.download('admin/user/export', exportParams, filename)
    },

    /*
    * 导入用户
    * */
    handleImportRequest(options) {
      const file = options.file;
      const formData = new FormData();
      formData.append('file', file);

      this.$axios.post('/admin/user/import', formData, {
        headers: {
          'Content-Type': 'multipart/form-data'
        }
      }).then(res => {
        if (res.code === 200) {
          this.$message.success('导入成功');
          this.getUser(); // 刷新列表
        } else {
          this.$message.error(res.msg || '导入失败');
        }
      }).catch(error => {
        console.error('导入用户错误:', error);
        this.$message.error('导入失败，请稍后重试');
      });
    },

    /*
    * 导入成功回调
    * */
    onImportSuccess(response, file, fileList) {
      if (response.code === 200) {
        this.$message.success('导入成功');
        this.getUser(); // 刷新列表
      } else {
        this.$message.error(response.msg || '导入失败');
      }
    },

    /*
    * 导入失败回调
    * */
    onImportError(err, file, fileList) {
      console.error('导入失败:', err);
      this.$message.error('导入失败，请检查文件格式或稍后重试');
    }
  },
}
</script>
<style lang="scss" scoped>
.pagination-container {
  margin-top: 20px;
  text-align: right;
}

.search-history {
  background-color: #f5f7fa;
  padding: 12px 16px;
  border-radius: 4px;
  border: 1px solid #e4e7ed;

  .history-label {
    font-weight: 500;
    color: #606266;
    margin-right: 12px;
  }

  .history-tag {
    transition: all 0.3s;

    &:hover {
      background-color: #409eff;
      color: white;
      transform: translateY(-1px);
    }
  }
}

.mb8 {
  margin-bottom: 8px;
}

// 弹窗样式
.dialog-footer {
  text-align: right;
  padding-top: 20px;
}

// 表单样式优化
.el-form-item {
  margin-bottom: 18px;
}

.el-input-number {
  width: 100%;
}

// 弹窗内容区域样式
.el-dialog__body {
  padding: 20px 30px;
}

// 表单行间距
.el-row {
  margin-bottom: 0;
}

// 状态选择器样式
.el-radio-group {
  .el-radio {
    margin-right: 20px;
  }
}

// 批量删除按钮样式
.el-button--danger.is-plain {
  &:disabled {
    color: #c0c4cc;
    background-color: #f5f7fa;
    border-color: #e4e7ed;
  }
}

// 表格状态列样式
.status-normal {
  color: #67c23a;
  font-weight: 500;
}

.status-disabled {
  color: #f56c6c;
  font-weight: 500;
}

// 操作按钮样式
.el-button--text {
  padding: 0 8px;

  &:disabled {
    color: #c0c4cc;
    cursor: not-allowed;
  }
}
</style>
